<template>
    <div id="home">
        <header>
            <ul>
                <li  @click="gonews"><h2 >每日推荐</h2></li>
               
            </ul>
            <ul>
                 <li>插画</li>
                <li>漫画</li>
                <li>排行</li>
                <li>收藏</li>
                <li>头像</li>
                <li>用户id</li>
            </ul>
        </header>
        <article>
            <div class="content">
                  <div class="phone2"> <img  src="https://lh3.googleusercontent.com/qbltoJOFjwk-f0DDshheW6xindJFQqk9LY2sRjh4472GYdE2m0jA1rqbqM0TrGeBEuSCyq62CnlbMLIpoqn1q1JZJ6pMmLykaS58xPo=w486-rw-e365-v2" alt=""></div>
               <div class="phone1"> <img  src="https://lh3.googleusercontent.com/cSL-pbyX55ioG6Q6S1-ZtwDyr7kvMPkXpyjR4ECs2SszGzjNT9XOGxipJkIEDR4EtfE538AqOi14K7DcVP82Duju0zz_3vvWSGRnBg=w486-rw-e365-v2" alt=""></div>
                  <div class="phone3"> <img class="imgh"  src="https://lh3.googleusercontent.com/3yE26_8hqY6QiDzXsOAs_KihOe59fzD25-LkbOWgQs8rBPljQYA2udlZBNGsTEfwwteTXtYNaKr-G6-rNSL0c1l0eya7CAyzNxoDuF8=w530-rw-e365-v2" alt=""></div>
            </div>
            <div class="tt"><span>Android</span><p><pre>Just the way
you want it.</pre></p></div>
        </article>
        <div class="bt1"><p class="icon">x</p></div>
    </div>
</template>
<style scoped>
@font-face {
    font-family: t1;
    src: url(../assets/t1.woff2);
}
span{
    position: absolute;
    font-size: 30px;
    left: 100px;
     line-height: 60px;
    }
#home{
    overflow: hidden;
   background-color: #2ecc71;
   position: relative;
}
p{
    line-height: 60px;
    margin-left: 100px;
    font-family: 't1';
    font-size: 80px;
    font-weight: 900;
}
header{
    
  
     z-index: 2;
    display: flex;
    height: 100px;
    margin-bottom: 200px;
}
  header ul:nth-child(1) {
      font-weight: bold;
       margin-left: -40px;
      font-size: 1rem;
      margin-top: 20px;
      display: flex;
      
      list-style: none;
      text-decoration: none;
       margin-right: auto;

  }
  header  ul:nth-child(1) li:nth-child(1)::after{
      content: "";
      display: block;
     width: 400px;
  height: 400px;
  margin-left: 5%;


margin-top: -70%;
 
      border-radius: 50%;
      background-color: #dff9fb;
     
  }

  header ul:nth-child(2){
   justify-content: right;
      font-weight: bold;
       font-size: 1rem;
        margin-top: 20px;
       display: flex;
      list-style: none;
      text-decoration: none;
      margin-right: 20px;
  }
  header ul:nth-child(2)::after{
        content: "";
      display: block;
     width: 25vw;
  height: 120vh;
 transform: rotate(0deg);
 margin-top: 20%;
 margin-right: 8vw;
   border-radius:200px;

      background-color: #1e90ff;
     
  }

    ul>li {
            margin: 0 10px;
        }
.content{
  margin-top: -200px;
    height: 100vh;
    display: grid;
     grid-template-rows: 20% 20% 20% 20% 20% ;
        grid-template-columns: 25% 25% 25% 25%;
}
.phone1{
     grid-row-start: 2;
        grid-row-end: 5;
        grid-column-start: 2;
        grid-column-end: 3;
        position: absolute;
        left: 35%;
  
}
.phone2{
     grid-row-start: 1;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 2;
      position: absolute;
      top: -40%;
      left: 10%;
  
}
.phone3{
transform: rotate(-90deg);
     grid-row-start: 2;
        grid-row-end: 5;
        grid-column-start: 4;
        grid-column-end: 5;
     z-index: 3;
    position: absolute;
    right: -5%;
     
  
}
.imgh{
   width: 65%;
   height: 110%;
    z-index: 2;
}
img{
    width: 65%;
    height: 110%;
    z-index: 2;
}
.tt{
      grid-row-start: 4;
        grid-row-end: 6;
        grid-column-start: 1;
        grid-column-end: 3;
     z-index: 3;
   position: absolute;
   top: 40%;
     
}
.bt1{
    overflow: hidden;
    display: flex;
    box-shadow: 1px 1px 1px .3;
    height: 50px;
    width: 50px;
    text-align: center;
    background-color: #fff;
    font-size: 40px;
    border-radius: 50%;
    float: right bootom;
   position: fixed;
 left: 90vw;
 bottom: 10vh;
 transition: 1s;
 margin:0 0 0 auto;
}
.bt1:hover{
    width: 100px;
    border-radius: 50px;
  
    /* transform: translateX(-100px); */

}
.icon{
    font-weight: 400;
    font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin-left: 0;
}
</style>
<script>
export default {
    methods:{
        gonews(){
             console.log("go")
            this.$router.push({name:"news"})
           
        }
    }
}
</script>